<template>
  <div class="main-box mt20 mb20">
    <el-carousel
      class="carousel"
      :interval="3000"
      type="card"
      height="250px"
      indicator-position="none"
      v-if="articleList.length > 2">
      <el-carousel-item v-for="item in articleList" :key="item" @click="goDetail(item.id)">
        <p class="tetx-base carousel-text text-overflow">{{ item.title }}</p>
        <img
          class="scale"
          :src="item.cover ? joinUplodUrl(item.cover) : getAssetsFile('auth.jpg')"
          alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
  import { getAssetsFile } from '@/utils/utils';
  import { joinUplodUrl } from '@/utils/utils';
  import useBlogList from '@/hooks/useBlogList';
  const { articleList, goDetail } = useBlogList();
</script>

<style lang="scss" scoped>
  .carousel {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .carousel-text {
      width: 100%;
      position: absolute;
      bottom: 0;
      z-index: 100;
      padding: 10px;
      background-color: var(--bg-color);
      text-align: center;
    }
  }
</style>
